<button type="button" class="collapsible" id="toggle">View Controls</button>
<div class="content" id="content">
  <table>
    <tr class="uiRow">
      <td>
        <label>Ambient:</label>
      </td>
      <td>
        <input id="ambient" type="range" min="0" max="100" value="25" />
      </td>
    </tr>

    <tr class="uiRow">
      <td>
        <label>Colors:</label>
      </td>
      <td>
        <input id="colors" type="checkbox" checked>
      </td>
    </tr>

    <tr class="uiRow">
      <td>
        <select id="representations" style="width: 100%">
          <option value="0">Points</option>
          <!-- <option value="1">Wireframe</option> -->
          <option value="2" selected>Surface</option>
          <!-- <option value="3">Surface with Edges</option> -->
        </select>
      </td>
    </tr>

    <tr class="uiRow" id="pointSizeRow">
      <td>
        <label>Point Size:</label>
      </td>
      <td>
        <input id="pointSize" type="range" min="1" max="20" value="5" />
      </td>
    </tr>

    <tr class="uiRow" id="lightingRow">
      <td>
        <label>Lighting:</label>
      </td>
      <td>
        <input id="lighting" type="checkbox">
      </td>
    </tr>

  </table>
</div>
<p/>
<button type="button" class="collapsible" id="toggle-measure">Measure</button>
<div class="content" id="measure-controller">
  <table>
    <tr class="uiRow">
      <span>Use P-key to select</span>
    </tr>
    <tr class="uiRow">
      <td>
        <label>Distance (XYZ, XY, Z): </label>
      </td>
      <td>
        <span id="distance">0</span>
      </td>
    </tr>
    <tr class="uiRow">
      <td>
        <label>Marker Size: </label>
      </td>
      <td>
        <input id="markerSize" type="range" min="1" max="100" value="2" />
      </td>
    </tr>
  </table>
</div>
